<template>
  <div>
    <div class="title">
      <el-row>
        <el-col :span="1" style="width: 50px;">
          <span style="color:#757575;">位置 : </span>
        </el-col>
        <el-col :span="20">
          <span class="hand textactive">权限设置</span>
        </el-col>
      </el-row>
    </div>
    <div class="posttable">
      <el-row type="flex" justify="center">
        <el-col :span="23">
          <el-col style="margin-top: 10px;margin-bottom: 10px;">
            <el-select v-model.trim="role" class="perset" @change="selectrole">
              <el-option v-for="(item,index) in rolelist" :key="index" :label="item.name"
                         :value="item.id"></el-option>
            </el-select>
          </el-col>
          <el-col>
            <el-row class='pertree1'>
              <el-col style="width: 268px;height: 674px;background-color:#f4f7f9;">
                <div
                  style="border-bottom: 1px solid #b5b8ba;overflow: hidden;margin-left: 10px;margin-right: 10px;color: #b5b8ba;height: 38px;line-height: 38px;">
                    <span
                      style="display:inline-block;color:#333;font-size: 16px;font-weight: 700;">菜单</span>
                  <div style="display:inline-block;font-size: 16px;float: right;margin-right: 10px;">
                    <el-switch
                      v-model="dataOrModule"
                      active-text="模块"
                      inactive-text="数据">
                    </el-switch>
                  </div>
                </div>
              
                
                <div class="treebox">
                  <el-tree
                    style="margin: 0 auto;width: 80%;"
                    :data="data"
                    show-checkbox
                    node-key="id"
                    ref="tree"
                    :props="defaultProps"
                    default-expand-all
                    :default-checked-keys="defaultdata"
                    highlight-current
                    @node-click="handleNodeClick"
                    @check="handleCheckChange"
                    :expand-on-click-node=false
                  >
                  </el-tree>
                </div>
              </el-col>
              <el-col class="permiss" v-if="dataOrModule">
                <div v-if="!nodata">
                  <el-tabs v-model="activeName" type="card" @tab-click="handleClick" class="tabs">
                    <el-tab-pane
                      v-for="(item, index) in perdata"
                      :name="item.id"
                      :key="index"
                    >
                    <span slot="label">
                      {{item.name}}
                      <span style="float: right;line-height: 40px;color: #747776;">
                        <i class="el-icon-delete" @click="deletemoduler(item.id)"></i>
                      </span>
                    </span>
                      <div v-if="Sectionsdata.length !== 0">
                        <el-table
                          highlight-current-row
                          class="tablelist"
                          ref="mailtable"
                          :data="Sectionsdata.slice((currentPage-1)*pagesize,currentPage*pagesize)"
                          border
                        >
                          <el-table-column
                            prop="name"
                            label="权限名称"
                          >
                          </el-table-column>
          
                          <el-table-column prop="type" label="权限类型">
                          </el-table-column>
          
                          <el-table-column prop="state" label="权限属性">
                          </el-table-column>
          
                          <el-table-column label="操作">
                            <template slot-scope="scope">
                            <span style="color: #1198ff;cursor: pointer;">
															<template v-if="scope.row.type=='按钮'">
																<i class="iconfont icon-shanchu" @click="deletesection(scope.row)"></i>
															</template>
															<template v-else>
																<i class="iconfont icon-bianji" @click="editsection(scope.row)"></i>
																<i class="iconfont icon-shanchu" @click="deletesection(scope.row)"></i>
															</template>
                            </span>
                            </template>
                          </el-table-column>
                        </el-table>
                        <div class="pager">
          
                          <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="pagehandleCurrentChange"
                            :current-page="currentPage"
                            :page-sizes="[5,10,15]"
                            :page-size="pagesize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="totalcount"
                          >
                          </el-pagination>
                        </div>
      
                      </div>
                      <div v-if="Sectionsdata.length == 0"
                           style="background-color: #fff;text-align: center;padding-top: 100px;">
                        <img src="../../../static/image/leida.png" alt="">
                        <p style="color: #767676;margin-top: 30px;">暂无内容!</p>
                      </div>
                    </el-tab-pane>
                    <el-tab-pane name="forth" disabled>
                      <span slot="label" style="color: #1099fe;cursor: pointer;" @click="add"><i class="el-icon-plus"></i> <span>添加模块</span> </span>
                      <div style="background-color: #fff;text-align: center;padding-top: 100px;">
                        <img src="../../../static/image/leida.png" alt="">
                        <p style="color: #767676;margin-top: 30px;">暂无内容!</p>
                      </div>
                    </el-tab-pane>
                  </el-tabs>
                  <div style="position: absolute;right: 0;top: -4px;">
                    <el-row type="flex" justify="space-between" style="margin-top: 10px;" class="btn">
                      <el-input
                        style="width: 136px;margin-top: -1px;"
                        size="small"
                        placeholder="查找"
                        v-model.trim="inputValue"
                        @keydown.enter.native="searchMsg"
                      >
                        <i
                          slot="suffix"
                          class="el-input__icon el-icon-search"
                          style="cursor: pointer;"
                          @click="searchMsg"
                        ></i>
                      </el-input>
                      <div style="margin-left: 28px;margin-right: 12px;">
                        <el-button
                          class="add"
                          size="small"
                          round
                          @click="addSect"
                        >新增
                        </el-button>
                      </div>
    
                    </el-row>
                  </div>
                </div>
  
                <div v-if="nodata">
                  <div style="background-color: #fff;text-align: center;padding-top: 100px;">
                    <img src="../../../static/image/leida.png" alt="">
                    <p style="color: #767676;margin-top: 30px;">暂无内容!</p>
                  </div>
                </div>
              </el-col>
              <el-col class="permiss" v-if="!dataOrModule">
                <div v-if="!nodata">
                  <div style="float: right;margin-bottom: 10px;">
                    <el-row type="flex" justify="space-between" style="margin-top: 10px;" class="btn">
                      <el-input
                        style="width: 136px;margin-top: -1px;"
                        size="small"
                        placeholder="查找"
                        v-model.trim="inputValueD"
                        @keydown.enter.native="searchMsgD"
                      >
                        <i
                          slot="suffix"
                          class="el-input__icon el-icon-search"
                          style="cursor: pointer;"
                          @click="searchMsgD"
                        ></i>
                      </el-input>
                      <div style="margin-left: 28px;margin-right: 12px;">
                        <el-button
                          class="add"
                          size="small"
                          round
                          @click="addHead"
                        >新增
                        </el-button>
                      </div>
                    </el-row>
                  </div>
                  <div v-if="herdata.length !== 0">
                    <el-table
                      highlight-current-row
                      class="tablelist"
                      ref="headtable"
                      :data="herdata.slice((currentPage1-1)*pagesize1,currentPage1*pagesize1)"
                      border
                    >
                      <el-table-column
                        prop="name"
                        label="数据名称"
                      >
                      </el-table-column>
                      
                      <el-table-column
                        prop="nameEn"
                        label="数据别名"
                      >
                      </el-table-column>
                      
                      <el-table-column
                        prop="id"
                        label="数据id"
                      >
                      </el-table-column>
                      <el-table-column
                        label="操作"
                      >
                        <template slot-scope="scope">
                            <span style="color: #1198ff;cursor: pointer;">
                              <i class="iconfont icon-shanchu" @click="deleteHeadData(scope.row.id)"></i>
                            </span>
                        </template>
                      </el-table-column>
                    </el-table>
                    <div class="pager">
                      
                      <el-pagination
                        @size-change="handleSizeChangeD"
                        @current-change="pagehandleCurrentChangeD"
                        :current-page="currentPage1"
                        :page-sizes="[5,10,15]"
                        :page-size="pagesize1"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="totalcount1"
                      >
                      </el-pagination>
                    </div>
                  
                  </div>
                  <div v-if="herdata.length == 0"
                       style="background-color: #fff;text-align: center;padding-top: 100px;">
                    <img src="../../../static/image/leida.png" alt="">
                    <p style="color: #767676;margin-top: 30px;">暂无内容!</p>
                  </div>
                </div>
  
  
                <div v-if="nodata">
                  <div style="background-color: #fff;text-align: center;padding-top: 100px;">
                    <img src="../../../static/image/leida.png" alt="">
                    <p style="color: #767676;margin-top: 30px;">暂无内容!</p>
                  </div>
                </div>
              </el-col>
            </el-row>
          </el-col>
        </el-col>
      </el-row>
    </div>
    
    
    <!--    新增模块弹出框-->
    <el-dialog
      title="新增模块"
      :visible.sync="adddialogVisible"
      width="415px"
      :before-close="addClose"
      class="addroledialog"
    >
      <div style="text-align: left">
        <el-form label-position="top" ref="addform" :model="addform" :rules="rules" style="padding:0px 50px;">
          <el-form-item prop="name" label="模块名称">
            <el-select v-model="addform.name" multiple placeholder="请选择模块名称" style="width: 274px">
              <el-option
                v-for="item in ModularList "
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
           <el-button class="sure" :disabled="adddis" round @click="addsend('addform')">确 定</el-button>
    <el-button round @click="addClose" class="cancel">取 消</el-button>
  </span>
    </el-dialog>
    
    
    <!--    删除模块弹出框-->
    <el-dialog
      title="删除"
      :visible.sync="delmoduledialogVisible"
      width="30%"
      :before-close="deletemoduleClose"
      class="deletedialog"
    >
      <div style="text-align: center">
        <i class="el-icon-warning" style="font-size: 20px;color: #fcb543;"><span
          style="font-size: 16px;color: #333;margin-left: 12px;">是否确认删除该模块?</span></i>
      </div>
      <span slot="footer" class="dialog-footer">
           <el-button class="sure" round :disabled="delmoduledis" @click="delmodulesend">确 定</el-button>
    <el-button round @click="deletemoduleClose" class="cancel">取 消</el-button>
  </span>
    </el-dialog>
    
    
    <!--    新增组件弹出框-->
    <el-dialog
      title="新增"
      :visible.sync="addSectionVisible"
      width="415px"
      :before-close="addSectionClose"
      class="addroledialog"
    >
      <div style="text-align: left">
        <el-form label-position="top" ref="addSectionform" :model="addSectionform" :rules="addSectionrules"
                 style="padding:0px 50px;">
          <el-form-item prop="type" label="权限类型">
            <el-select v-model="addSectionform.type" placeholder="请选择权限类型" style="width: 274px"
                       @change="getSectionList">
              <el-option
                v-for="item in typeList "
                :key="item"
                :label="item"
                :value="item">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="name" label="权限名称">
            <el-select v-model="addSectionform.name" multiple placeholder="请选择权限名称" style="width: 274px">
              <el-option
                v-for="item in SectionList "
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="id" label="权限属性">
            <el-col>
              <el-select v-model="addSectionform.state" placeholder="请选择权限属性" :disabled="selchange"
                         style="width: 274px">
                <template v-if="addSectionform.type==='输入框'">
                  <el-option v-for="item in statelist " :key="item.name" :label="item.name" :value="item.name">
                  </el-option>
                </template>
                <template v-if="addSectionform.type==='按钮'">
                  <el-option key="可操作" label="可操作" value="可操作">
                  </el-option>
                </template>
              </el-select>
            </el-col>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
           <el-button class="sure" :disabled="addSectiondis" round
                      @click="addSectionsend('addSectionform')">确 定</el-button>
    <el-button round @click="addSectionClose" class="cancel">取 消</el-button>
  </span>
    </el-dialog>
    <!--    修改组件弹出框-->
    <el-dialog
      title="修改"
      :visible.sync="editSectionVisible"
      width="415px"
      :before-close="editSectionClose"
      class="addroledialog"
    >
      <div style="text-align: left">
        <el-form label-position="top" ref="editSectionform" :model="editSectionform" :rules="editSectionrules"
                 style="padding:0px 50px;">
          
          <el-form-item prop="id" label="权限属性">
            <el-col>
              <el-select v-model="editSectionform.state" placeholder="请选择权限属性" style="width: 274px">
                <el-option
                  v-for="item in statelist "
                  :key="item.name"
                  :label="item.name"
                  :value="item.name">
                </el-option>
              </el-select>
            </el-col>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
           <el-button class="sure" :disabled="editSectiondis" round
                      @click="editSectionsend('editSectionform')">确 定</el-button>
    <el-button round @click="editSectionClose" class="cancel">取 消</el-button>
  </span>
    </el-dialog>
    
    <!--    删除组件弹出框-->
    <el-dialog
      title="删除"
      :visible.sync="delSectionVisible"
      width="30%"
      :before-close="delSectionClose"
      class="deletedialog"
    >
      <div style="text-align: center">
        <i class="el-icon-warning" style="font-size: 20px;color: #fcb543;"><span
          style="font-size: 16px;color: #333;margin-left: 12px;">是否确认删除该组件?</span></i>
      </div>
      <span slot="footer" class="dialog-footer">
           <el-button class="sure" round :disabled="delSectiondis" @click="delSectionsend">确 定</el-button>
    <el-button round @click="delSectionClose" class="cancel">取 消</el-button>
  </span>
    </el-dialog>
    
    
    <el-dialog
      title="错误"
      :visible.sync="seconderror"
      width="30%"
      :before-close="seconderrorClose"
      class="deletedialog"
    >
      <div style="text-align: center">
        <i class="el-icon-warning" style="font-size: 20px;color: #fcb543;"><span
          style="font-size: 16px;color: #333;margin-left: 12px;">该菜单下没有模块，不能添加组件!</span></i>
      </div>
      <span slot="footer" class="dialog-footer">
           <el-button class="sure" round @click="seconderrorClose">确 定</el-button>
    <el-button round @click="seconderrorClose" class="cancel">取 消</el-button>
  </span>
    </el-dialog>
    
    
    <!--  添加角色权限关联-->
    <el-dialog
      title="新增"
      :visible.sync="addDataVisible"
      width="415px"
      :before-close="addDataClose"
      class="addroledialog"
    >
      <div style="text-align: left">
        <el-form label-position="top" ref="addDataform" :model="addDataform" :rules="addDatarules"
                 style="padding:0px 50px;">
          <el-form-item prop="dataIds" label="角色权限关联属性">
            <el-select v-model="addDataform.dataIds" multiple style="width: 274px">
              <el-option
                v-for="item in roleDatalist "
                :key="item.name"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
           <el-button class="sure" :disabled="addDatadis" round
                      @click="addDatasend('addDataform')">确 定</el-button>
    <el-button round @click="addDataClose" class="cancel">取 消</el-button>
  </span>
    </el-dialog>
    
    <!--    删除角色权限关联-->
    <el-dialog
      title="删除"
      :visible.sync="delDataVisible"
      width="30%"
      :before-close="delDataClose"
      class="deletedialog"
    >
      <div style="text-align: center">
        <i class="el-icon-warning" style="font-size: 20px;color: #fcb543;"><span
          style="font-size: 16px;color: #333;margin-left: 12px;">是否确认删除该数据?</span></i>
      </div>
      <span slot="footer" class="dialog-footer">
           <el-button class="sure" round :disabled="delDatadis" @click="delDatasend">确 定</el-button>
    <el-button round @click="delDataClose" class="cancel">取 消</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>
  import axios from 'axios'
  
  export default {
    name: "permissionset",
    data() {
      return {
        //当前角色id
        role: '',
        //角色下拉框的数据
        rolelist: [],
        //树形菜单的数据
        data: [{
          id: 1,
          name: '招聘管理系统',
          children: []
        }],
        //设置树形结构所使用的变量名
        defaultProps: {
          children: "children",
          label: "name"
        },
        //树形结构复选框默认选中的按钮相关变量
        defaultdata: [],
        //tabs标签页的绑定值
        activeName: '',
        //模块对应的input框绑定的变量名
        inputValue: '',
        //tabs标签的数据变量名
        perdata: [],
        //tabs标签下的表格的数据变量名
        Sectionsdata: [],
        totalcount: '',
        pagesize: 15,
        currentPage: 1,
        //设置树形控件的复选框是否选中的变量名称
        checkdata: [],
        //树形结构的数据，方便接下来的对比
        list: [],
        //当前点击的树形结构的数据
        currentNodeData: null,
        //添加模块的弹出框显示隐藏的变量
        adddialogVisible: false,
        //当前选择的模块的id
        modularId: null,
        Modular: [],
        ModularList: [],
        herdata: [],
        dataOrModule: true,
        inputValueD: '',
        totalcount1: '',
        currentPage1: 1,
        pagesize1: 15,
        typeList: [],
        adddis: false,
        addform: {
          name: []
        },
        rules: {
          'name': [
            {required: true, message: '请选择模块名称', trigger: 'change'}
          ],
        },
        delmoduleid: '',
        delmoduledis: false,
        delmoduledialogVisible: false,
        selchange: false,//判断是否输入类型为‘按钮’，按钮不可的操作类型只能是‘可操作’
        //新增组件的表格数据
        addSectionform: {
          name: [],
          state: '',
          type: ''
        },
        SectionList: [],
        //新增组件表格的校验
        addSectionrules: {
          'name': [
            {required: true, message: '请选择权限名称', trigger: 'change'}
          ],
          'type': [
            {required: true, message: '请选择权限类型', trigger: 'change'}
          ],
          'state': [
            {required: true, message: '请选择权限属性', trigger: 'change'}
          ],
        },
        statelist: [{
          name: '可操作'
        }, {
          name: '只读'
        }],
        //新增组件发送按钮disabled的变量
        addSectiondis: false,
        //新增组件的弹出框的变量
        addSectionVisible: false,
        //修改组件表格数据
        editSectionform: {
          state: '',
          type: ''
        },
        //修改组件表格的校验
        editSectionrules: {
          'state': [
            {required: true, message: '请选择权限属性', trigger: 'change'}
          ],
          'type': [
            {required: true, message: '请选择权限类型', trigger: 'change'}
          ],
        },
        //修改组件发送按钮的disabled变量
        editSectiondis: false,
        //修改组件弹出框的变量
        editSectionVisible: false,
        //删除组件的弹出框变量
        delSectionVisible: false,
        //删除组件发送按钮disabled的变量
        delSectiondis: false,
        //删除组件的id
        delSectionid: null,
        delstate: null,
        seconderror: false,
        errorinfo: null,
        editsecid: null,
        addDataVisible: false,
        addDataform: {
          dataIds: []
        },
        addDatarules: {
          'dataIds': [
            {required: true, message: '请选择角色权限关联属性', trigger: 'blur'}
          ]
        },
        addDatadis: false,
        roleDatalist: [],
        delDataVisible: false,
        delDatadis: false,
        delDataid: null,
        nodata : false
      }
    },
    created() {
      //获取角色的下拉框列表数据
      axios.post(this.url + '/system/role/getAllRoles').then(res => {
        this.unlogin(res.data.code);
        if (res.data.code == 200) {
          this.rolelist = res.data.data;
          this.role = this.rolelist[0].id;
          this.selectrole()
        }
      })
    },
    methods: {
      //选择角色获取树形结构数据
      selectrole() {
        this.defaultdata = [];
        this.checkdata = [];
        axios.post(this.url + '/system/role/getRoleMenuRef', {
          roleId: this.role
        }).then(res => {
          this.unlogin(res.data.data);
          if (res.data.code == 200) {
            this.data[0].children = res.data.data;
            this.list = res.data.data;
            for (var i = 0; i < res.data.data.length; i++) {
              if (res.data.data[i].flag == "Y" && res.data.data[i].children.length == 0) {
                this.checkdata.push(res.data.data[i].id)
              }
              if (i == 0) {
                if (res.data.data[i].children.length !== 0) {
                  for (var j = 0; j < res.data.data[i].children.length; j++) {
                    if (j == 0) {
                      var idkey = res.data.data[i].children[j].id;
                      this.currentNodeData = res.data.data[i].children[j];
                      this.$nextTick(() => {
                        this.$refs.tree.setCurrentKey(idkey);
                      })
                    }
                  }
                } else {
                  var idkey = res.data.data[i].id;
                  this.currentNodeData = res.data.data[i];
                  this.$nextTick(() => {
                    this.$refs.tree.setCurrentKey(idkey);
                  })
                }
                
              }
              for (var j = 0; j < res.data.data[i].children.length; j++) {
                if (res.data.data[i].children[j].flag == "Y") {
                  this.checkdata.push(res.data.data[i].children[j].id)
                }
              }
            }
            this.defaultdata = this.checkdata;
            this.$nextTick(() => {
              this.$refs.tree.setCheckedKeys(this.defaultdata);
            })
            
            if (this.dataOrModule) {
              this.nodata = false;
              this.getRoleModularRef();
            } else {
              this.nodata = false;
              this.getRoleDataRef();
            }
            
            if(this.currentNodeData.name == this.data[0].name){
              this.nodata = true;
            }
          }
        })
      },
      selectrole1() {
        this.defaultdata = [];
        this.checkdata = [];
        axios.post(this.url + '/system/role/getRoleMenuRef', {
          roleId: this.role
        }).then(res => {
          this.unlogin(res.data.data);
          if (res.data.code == 200) {
            this.data[0].children = res.data.data;
            this.list = res.data.data;
            for (var i = 0; i < res.data.data.length; i++) {
              if (res.data.data[i].flag == "Y" && res.data.data[i].children.length == 0) {
                this.checkdata.push(res.data.data[i].id)
              }
              for (var j = 0; j < res.data.data[i].children.length; j++) {
                if (res.data.data[i].children[j].flag == "Y") {
                  this.checkdata.push(res.data.data[i].children[j].id)
                }
              }
            }
            this.defaultdata = this.checkdata;
            if (this.dataOrModule) {
              this.nodata = false;
              this.currentPage = 1;
              this.getRoleModularRef();
            } else {
              this.nodata = false;
              this.currentPage1 = 1;
              this.getRoleDataRef();
            }
  
            if(this.currentNodeData.name == this.data[0].name){
              this.nodata = true;
            }
            
            this.$nextTick(() => {
              this.$refs.tree.setCurrentKey(this.currentNodeData.id);
              this.$refs.tree.setCheckedKeys(this.defaultdata);
            })
            
          }
        })
      },
      //获取当前角色的当前菜单的模块数据
      getRoleModularRef() {
        this.perdata = [];
        axios.post(this.url + '/system/role/getRoleModularRef', {
          roleId: this.role,
          menuId: this.currentNodeData.id
        }).then(res => {
          this.unlogin(res.data.code);
          if (res.data.code == 200) {
            this.perdata = res.data.data;
            if (this.perdata.length > 0) {
              this.activeName = res.data.data[0].id;
              this.modularId = res.data.data[0].id;
              this.currentPage = 1;
              this.Sectionsdata = [];
              this.getRoleSectionRef();
            } else if (this.perdata.length == 0) {
              this.Sectionsdata = [];
              this.activeName = 'forth';
              this.modularId = null;
            }
          }
        })
      },
      // 获取该菜单下的角色权限
      getRoleDataRef() {
        axios.post(this.url + '/system/role/getRoleDataRef', {
          roleId: this.role,
          menuId: this.currentNodeData.id,
          condition: this.inputValueD
        }).then(res => {
          this.unlogin(res.data.code);
          if (res.data.code == 200) {
            this.herdata = res.data.data;
            this.totalcount1 = this.herdata.length;
            if(this.currentPage1 > Math.ceil(this.totalcount1/this.pagesize1)){
              this.currentPage1 = Math.ceil(this.totalcount1/this.pagesize1);
            }
          }
        })
      },
      getDataList() {
        axios.post(this.url + '/system/role/getDataList', {
          roleId: this.role,
          menuId: this.currentNodeData.id
        }).then(res => {
          this.unlogin(res.data.code);
          if (res.data.code == 200) {
            this.roleDatalist = res.data.data;
          }
        })
      },
      //获取当前模块下的组件数据
      getRoleSectionRef() {
        axios.post(this.url + '/system/role/getRoleSectionRef', {
          roleId: this.role,
          modularId: this.modularId,
          condition: this.inputValue
        }).then(res => {
          this.unlogin(res.data.code);
          if (res.data.code == 200) {
            this.Sectionsdata = res.data.data;
            this.totalcount = this.Sectionsdata.length;
            if(this.currentPage > Math.ceil(this.totalcount/this.pagesize)){
              this.currentPage = Math.ceil(this.totalcount/this.pagesize);
            }
          }
        })
      },
      getSectionType() {
        this.typeList = [];
        axios.post(this.url + '/system/role/getSectionType').then(res => {
          this.unlogin(res.data.code);
          if (res.data.code == 200) {
            this.typeList = res.data.data;
          }
        })
      },
      getSectionList() {
        axios.post(this.url + '/system/role/getSectionList', {
          modularId: this.modularId,
          roleId: this.role,
          type: this.addSectionform.type
        }).then(res => {
          this.unlogin(res.data.code);
          if (res.data.code == 200) {
            this.SectionList = res.data.data;
            if (this.addSectionform.type === "按钮") {
              this.addSectionform.state = "可操作";
              this.selchange = true;
            } else {
              this.selchange = false;
              this.addSectionform.state = "";
            }
          }
        })
      },
      //添加模块
      add() {
        document.documentElement.style.overflow = 'hidden';
        this.adddialogVisible = true;
        this.getModularList();
      },
      //获取新增模块弹出框的下拉框数据
      getModularList() {
        axios.post(this.url + '/system/role/getModularList', {
          roleId: this.role,
          menuId: this.currentNodeData.id
        }).then(res => {
          this.unlogin(res.data.code);
          if (res.data.code == 200) {
            this.ModularList = res.data.data;
            for (var i = 0; i < this.ModularList.length; i++) {
              if (this.ModularList[i].flag == "Y") {
                this.addform.name.push(this.ModularList[i].id)
              }
            }
          }
        })
      },
      //发送新增模块的请求
      addsend(formName) {
        this.$refs[formName].validate((valid) => {
            if (valid) {
              this.adddis = true;
              axios.post(this.url + '/system/role/addRoleModularRef', {
                roleId: this.role,
                modularIds: this.addform.name
              }).then(res => {
                this.unlogin(res.data.code);
                if (res.data.code == 200) {
                  this.$refs.addform.resetFields();
                  this.Sectionsdata = [];
                  this.getRoleModularRef();
                  this.adddis = false;
                  document.documentElement.style.overflow = 'auto';
                  this.adddialogVisible = false;
                }
              })
            }
          }
        )
      },
      //关闭新增模块的弹出框
      addClose() {
        this.$refs.addform.resetFields();
        this.adddis = false;
        document.documentElement.style.overflow = 'auto';
        this.adddialogVisible = false;
      },
      //删除模块弹出框
      deletemoduler(id) {
        this.delmoduleid = id;
        document.documentElement.style.overflow = 'hidden';
        this.delmoduledialogVisible = true;
      },
      //发送删除模块的请求
      delmodulesend() {
        this.delmoduledis = true;
        axios.post(this.url + '/system/role/delRoleModualrRef', {
          roleId: this.role,
          modularId: this.delmoduleid
        }).then(res => {
          this.unlogin(res.data.code);
          if (res.data.code == 200) {
            this.getRoleModularRef();
            this.delmoduledis = false;
            this.delmoduleid = null;
            document.documentElement.style.overflow = 'auto';
            this.delmoduledialogVisible = false;
          }
        })
      },
      //关闭删除模块弹出框
      deletemoduleClose() {
        this.delmoduledis = false;
        this.delmoduleid = null;
        document.documentElement.style.overflow = 'auto';
        this.delmoduledialogVisible = false;
      },
      searchMsg() {
        this.currentPage = 1;
        this.getRoleSectionRef();
      },
      searchMsgD() {
        this.currentPage1 = 1;
        this.getRoleDataRef();
      },
      //新增模块下组件的弹出框
      addSect() {
        if (this.modularId !== null) {
          this.addSectiondis = false;
          document.documentElement.style.overflow = 'hidden';
          this.addSectionVisible = true;
          //this.getSectionList();
          this.getSectionType();
        } else {
          document.documentElement.style.overflow = 'hidden';
          this.seconderror = true;
        }
      },
      //菜单下没有模块的提示
      seconderrorClose() {
        document.documentElement.style.overflow = 'auto';
        this.seconderror = false;
      },
      //发送新增组件的请求
      addSectionsend(formName) {
        this.$refs[formName].validate((valid) => {
            if (valid) {
              this.addSectiondis = true;
              axios.post(this.url + '/system/role/addRoleSectionRef', {
                roleId: this.role,
                sectionIds: this.addSectionform.name,
                state: this.addSectionform.state,
                type: this.addSectionform.type
              }).then(res => {
                this.unlogin(res.data.code);
                if (res.data.code == 200) {
                  this.inputValue = '';
                  this.currentPage = 1;
                  this.getRoleSectionRef();
                  this.addSectionform.state = '';
                  this.$refs.addSectionform.resetFields();
                  this.addSectiondis = false;
                  document.documentElement.style.overflow = 'auto';
                  this.addSectionVisible = false;
                }
              })
            }
          }
        )
      },
      //关闭新增组件的弹出框
      addSectionClose() {
        this.addSectionform.state = '';
        this.$refs.addSectionform.resetFields();
        this.addSectiondis = false;
        document.documentElement.style.overflow = 'auto';
        this.addSectionVisible = false;
      },
      //修改组件
      editsection(row) {
        this.editsecid = row.id;
        this.editSectionform.state = row.state;
        this.editSectiondis = false;
        document.documentElement.style.overflow = 'hidden';
        this.editSectionVisible = true;
      },
      //修改组件发送请求
      editSectionsend(formName) {
        this.$refs[formName].validate((valid) => {
            if (valid) {
              this.editSectiondis = true;
              axios.post(this.url + '/system/role/updateSection', {
                roleId: this.role,
                sectionId: this.editsecid,
                state: this.editSectionform.state,
                type: this.editSectionform.type
              }).then(res => {
                this.unlogin(res.data.code);
                if (res.data.code == 200) {
                  this.$refs.editSectionform.resetFields();
                  this.editSectiondis = false;
                  document.documentElement.style.overflow = 'auto';
                  this.editSectionVisible = false;
                  this.getRoleSectionRef();
                }
              })
            }
          }
        )
      },
      //关闭修改组件的弹出框
      editSectionClose() {
        this.$refs.editSectionform.resetFields();
        this.editSectiondis = false;
        document.documentElement.style.overflow = 'auto';
        this.editSectionVisible = false;
      },
      //删除组件
      deletesection(row) {
        this.delSectionid = row.id;
        this.delstate = row.state;
        this.delSectiondis = false;
        document.documentElement.style.overflow = 'hidden';
        this.delSectionVisible = true;
      },
      //删除组件发送请求
      delSectionsend() {
        this.delSectiondis = true;
        axios.post(this.url + '/system/role/delRoleSectionRef', {
          roleId: this.role,
          sectionId: this.delSectionid,
          state: this.delstate
        }).then(res => {
          this.unlogin(res.data.code);
          if (res.data.code == 200) {
            this.getRoleSectionRef();
            this.delSectionid = null;
            this.delstate = null;
            this.delSectiondis = false;
            document.documentElement.style.overflow = 'auto';
            this.delSectionVisible = false;
          }
        })
      },
      //关闭删除组件的弹出框
      delSectionClose() {
        this.delSectiondis = false;
        this.delSectionid = null;
        this.delstate = null;
        document.documentElement.style.overflow = 'auto';
        this.delSectionVisible = false;
      },
      handleClick(tab, event) {
        this.inputValue = '';
        this.modularId = tab.name;
        this.currentPage = 1;
        this.getRoleSectionRef();
      },
      handleNodeClick(data) {
        this.inputValue = '';
        this.currentNodeData = data;
        if (this.dataOrModule) {
          this.nodata = false;
          this.currentPage = 1;
          this.getRoleModularRef();
        } else {
          this.nodata = false;
          this.currentPage1 = 1;
          this.getRoleDataRef();
        }
  
        if(this.currentNodeData.name == this.data[0].name){
          this.nodata = true;
        }
      },
      //点击单选按钮的操作
      handleCheckChange(data, checked) {
        data.flag = !data.flag;
        this.currentNodeData = data;
        this.$refs.tree.setCurrentKey(data.id);
        if (data.flag) {
          axios.post(this.url + '/system/role/addRoleMenuRef', {
            roleId: this.role,
            menuId: data.id
          }).then(res => {
            this.unlogin(res.data.data);
            if (res.data.code == 200) {
              this.selectrole1();
            }
          })
        } else {
          axios.post(this.url + '/system/role/delRoleMenuRef', {
            roleId: this.role,
            menuId: data.id
          }).then(res => {
            this.unlogin(res.data.data);
            if (res.data.code == 200) {
              this.selectrole1();
            }
          })
        }
      },
      // 数据新增
      addHead() {
        this.addDataVisible = true;
        this.getDataList();
        document.documentElement.style.overflow = "hidden"
      },
      addDatasend(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.addDatadis = true;
            axios.post(this.url + '/system/role/addRoleDataRef', {
              dataIds: this.addDataform.dataIds,
              roleId: this.role,
            }).then(res => {
              this.unlogin(res.data.code);
              if (res.data.code == 200) {
                this.addDatadis = false;
                this.$refs.addDataform.resetFields();
                this.currentPage1 = 1;
                document.documentElement.style.overflow = 'auto';
                this.addDataVisible = false;
                this.getRoleDataRef();
              }
            })
          }
        })
      },
      addDataClose() {
        this.addDatadis = false;
        this.$refs.addDataform.resetFields();
        document.documentElement.style.overflow = 'auto';
        this.addDataVisible = false;
      },
      delDataClose() {
        this.delDatadis = false;
        this.delDataVisible = false;
        document.documentElement.style.overflow = "auto"
      },
      deleteHeadData(id) {
        this.delDataid = id;
        this.delDatadis = false;
        document.documentElement.style.overflow = 'hidden';
        this.delDataVisible = true;
      },
      delDatasend() {
        this.delDatadis = true;
        axios.post(this.url + '/system/role/delRoleDataRef', {
          dataId: this.delDataid,
          roleId: this.role
        }).then(res => {
          this.unlogin(res.data.code);
          if (res.data.code == 200) {
            this.delDataid = null;
            this.delDatadis = false;
            document.documentElement.style.overflow = 'auto';
            this.delDataVisible = false;
            this.getRoleDataRef();
          }
        })
      },
      //修改表格分页的展示条数
      handleSizeChange(val) {
        this.pagesize = val;
      },
      //修改表格分页的当前页
      pagehandleCurrentChange(val) {
        this.currentPage = val
      },
      pagehandleCurrentChangeD(val) {
        this.currentPage1 = val
      },
      handleSizeChangeD(val) {
        this.pagesize1 = val
      },
    },
    watch: {
      "inputValue": function (val) {
        if (val == "") {
          this.currentPage = 1;
          this.getRoleSectionRef();
        }
      },
      "inputValueD": function (val) {
        if (val == "") {
          this.currentPage1 = 1;
          this.getRoleDataRef();
        }
      },
      "dataOrModule": function (val) {
        if(this.currentNodeData.name == this.data[0].name){
          this.nodata = true;
        }else{
          if (!val) {
            this.nodata = false;
            this.currentPage1 = 1;
            this.getRoleDataRef();
          } else {
            this.nodata = false;
            this.currentPage = 1;
            this.getRoleModularRef();
          }
        }
      }
    }
  }
</script>

<style scoped>
  .permiss .el-tabs--card >>> .el-tabs__header {
    height: 1.4375rem;
  }
  
  /deep/ .el-tabs__header {
    padding: 0 0 1rem 0;
    position: relative;
    margin: 0 0 0px;
    height: 100%;
  }
  
  .el-tabs--card >>> .el-tabs__header .el-tabs__nav {
    border: 0px solid #E4E7ED;
    border-bottom: none;
    border-radius: 4px 4px 0 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
  
  .el-tabs--top.el-tabs--card >>> .el-tabs__header .el-tabs__item:last-child {
    border-right: 1px #E4E7ED solid;
  }
  
  .posttable {
    min-height: 800px;
    background-color: #fff;
  }
  
  .title {
    background-color: #fff;
    height: 40px;
    line-height: 40px;
    font-size: 14px;
    padding-left: 20px;
    margin-top: 6px;
    margin-bottom: 6px;
  }
  
  .textactive {
    color: #1099ff;
  }
  
  .perset {
    width: 180px;
  }
  
  .treebox {
    height: 595px;
    overflow-y: scroll;
    overflow-x: hidden;
  }
  
  .add {
    width: 65px;
    height: 30px;
    padding: 7px 15px !important;
    opacity: 0.86;
    color: #fff;
    background: linear-gradient(to bottom, #5696f8 0%, #143dea 100%);
  }
  
  .add:hover {
    color: #fff !important;
  }
  
  .add:focus {
    color: #fff !important;
  }
  
  .pager {
    margin-top: 20px;
  }
  
  .pager {
    width: 100%;
    overflow: hidden;
    position: relative;
    margin-top: 10px;
    margin-bottom: 10px;
  }
  
  .el-pagination {
    margin-left: 50%;
    transform: translateX(-50%);
  }
  
  .permiss {
    background-color: #f4f7f9;
    width: 77%;
    margin-left: 15px;
    position: relative;
  }
  
  .permiss i {
    font-size: 14px;
  }
  
  .permiss span {
    font-size: 14px;
  }
  
  .tabs {
    width: 100%;
  }
  
  @media screen and (min-width: 1200px) and (max-width: 1900px) {
    .permiss {
      width: 77%;
    }
  }
  
  @media only screen and (min-width: 1920px) {
    .permiss {
      width: 84%;
    }
  }
</style>
